<template>
	<div ref="mgrDialog" class="dialog-wrap">
		
		<el-dialog 
			title="编辑" 
			width="70%" 
			:visible.sync="DialogVisible"
			@open="dialogOpen"
		>
			
			<el-row :gutter="20">

				{{editForm}}

				<el-form 
					v-if = "editForm != null"
					inline
					size="mini"
					:rules="rules"
					:label-width="formLabelWidth"
					:model.sync="editForm">
					
					<el-col :span="12">
						<el-form-item label="账号" prop="account">
		      				<el-input v-model="editForm.account" autocomplete="off"></el-input>
		    			</el-form-item>
		    		</el-col>
		    		
		    		<el-col :span="12">	
		    			<el-form-item label="密码" prop="password">
		      				<el-input v-model="editForm.password" type="password" autocomplete="off"></el-input>
		    			</el-form-item>
		    		</el-col>
		    		
		    		<el-col :span="12">	
		    			<el-form-item label="姓名" prop="name">
		      				<el-input v-model="editForm.name" autocomplete="off"></el-input>
		    			</el-form-item>
		    		</el-col>

		    		<el-col :span="12">	
		    			<el-form-item label="部门" prop="deptId">
		      				
		    				<el-select v-model="editForm.deptId" placeholder="请选择" clearable>
							    <el-option
							      v-for="item in deptIds"
							      :key="item.id"
							      :label="item.name"
							      :value="item.id">
							    </el-option>
							</el-select>

		    			</el-form-item>
		    		</el-col>


		    		<el-col :span="12">	
		    			<el-form-item label="职位" prop="positionIds">
		      				
		    				<el-select v-model="editForm.positionIds" multiple placeholder="请选择">
							    <el-option
							      v-for="item in positionIds"
							      :key="item.positionId"
							      :label="item.name"
							      :value="item.positionId">
							    </el-option>
							</el-select>

		    			</el-form-item>
		    		</el-col>
		    		
		    		<el-col :span="12">	
		    			<el-form-item label="电话" prop="phone">
		      				<el-input v-model="editForm.phone" autocomplete="off"></el-input>
		    			</el-form-item>
		    		</el-col>
		    		
		    		<el-col :span="12">	
		    			<el-form-item label="电子邮箱">
		      				<el-input v-model="editForm.email" autocomplete="off"></el-input>
		    			</el-form-item>
		    		</el-col>
		    		
		    		<el-col :span="12">	
		    			<el-form-item label="用户生日" prop="birthday">
		      				
    						<el-date-picker
						      v-model="editForm.birthday"
						      type="date"
						      placeholder="选择日期">
						    </el-date-picker>

		    			</el-form-item>
		    		</el-col>
		    		
		    		<el-col :span="12">	
		    			<el-form-item label="用户性别" prop="sex">

		      				<el-select v-model="editForm.sex" placeholder="请选择" clearable>
							    <el-option
							      v-for="item in sexes"
							      :key="item.value"
							      :label="item.label"
							      :value="item.value">
							    </el-option>
							</el-select>

		    			</el-form-item>
		    		</el-col>

		    		<el-col :span="12">	
		    			<el-form-item label="用户状态">

		      				<el-switch
							  :value="reverseStatus(editForm.status)"
							  active-color="#13ce66"
							  inactive-color="#ff4949">
							</el-switch>

		    			</el-form-item>
		    		</el-col>		
				</el-form>
			</el-row>
			
			<div slot="footer" class="dialog-footer">
				<el-button size="mini" type="primary" @click="confirm">修改</el-button>
			    <el-button size="mini" type="danger" @click="cancel">取消</el-button>
			</div>	
		</el-dialog>

	</div>
</template>


<script>
import {
  listPositions,
  dept
} from "@/api/admin/mgr";	
export default{
	props:{
		visible:{
			type:Boolean,
			default:false
		},
		form:{
			type:Object,
			default:{
				account:'',
				password:'',
				name:'',
				deptId:'',
				positionIds:[],
				phone:'',
				email:'',
				sex:'',

			}
		},
		//验证规则
		rules:{
			account:[{required:true,message:"请输入账号",trigger:"blur"}],
			password:[{required:true,message:"请输入密码",trigger:"blur"}],
			name:[{required:true,message:"请输入姓名",trigger:"blur"}],
			deptId:[{required:true,message:"请选择部门",trigger:"click"}],
			positionIds:[{required:true,message:"请选择职位",trigger:"click"}],
			phone:[{required:true,message:"请输入电话",trigger:"blur"}],
			birthday:[{required:true,message:"请输入用户生日",trigger:"blur"}],
			sex:[{required:true,message:"请选择性别",trigger:"blur"}],
		}
	},
	computed:{
		DialogVisible:{
			get(){
				return this.visible
			},
			set(val){

			}
		},

	},
	watch:{
		form(newVal,oldVal){

			console.log("-----mgrEditDialog--watch---form---------")
			console.log(newVal)

			this.editForm = newVal;
		}
	},
	data(){
		return{
			editForm:null,
			formLabelWidth:'100px',
			positionIds:[],
			deptIds:[],
			sexes: [
              {
                label: "男",
                value: 'M'
              },
              {
                label: "女",
                value: 'W'
              }
            ],
		}
	},
	mounted(){
		console.log("----dialog/mgrEditDialog-----mounted------------")
		//获取职位列表
		this.getPosition();
		//获取部分列表
		this.getDept();
	},
	methods:{
		//转换开关返回数值
		reverseStatus(val){
			if(val == 'ENABLE'){
				return true
			}else{
				return false
			}
		},
		dialogOpen(){
			console.log("----dialog/mgrEditDialog-----dialogOpen------------")
		},
		//获取职位列表
		getPosition(){
			listPositions().then((res)=>{
				console.log("----dialog/mgrEditDialog-----getPosition------")
				console.log(res)
				this.positionIds = res.data.data;
			})
		},
		//获取部门列表
		getDept(){
			dept().then((res)=>{
				console.log("----dialog/mgrEditDialog-----getDept------")
				
				this.deptIds = res.data;

				console.log(res)
			})
		},
		//取消按钮
		cancel(){
			console.log(this.editForm)
			this.$emit('btnCancel')
		},
		confirm(){
			console.log(this.editForm.positionIds)
		}

	}
}


</script>

<style scoped>
	
</style>